@charset "utf-8";
$color:#000000;
@import "_reset";
* {
    font-size: 0;
}


/*头部*/

header {
    .header {
        width: 6.4rem;
        height: 5.52rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        .image {
            margin-top: 0.2rem;
            img {
                width: 4.67rem;
                height: 4.88rem;
            }
        }
        .shadow {
            width: 100%;
            height: 0.62rem;
            background-image: radial-gradient(5rem 0.62rem at 3.2rem 0.62rem, #8d8d8d, #fff);
        }
    }
}


/*主体*/

section {
    padding-left: 0.43rem;
    padding-right: 0.44rem;
    .textOne {
        margin: 0.3rem 0;
        h3 {
            font-size: 0.3rem;
            line-height: 0.3rem;
            color: #5c5c5c;
        }
    }
    .textTwo {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .left {
            width: 4.16rem;
            p {
                font-size: 0.26rem;
                color: #5c5c5c;
            }
        }
        .center {
            width: 0.01rem;
            height: 0.86rem;
            background: #6b6b6b;
        }
        .right {
            button {
                background: white;
                i {
                    font-size: 0.4rem;
                    color: #6b6b6b;
                }
                p {
                    font-size: 0.2rem;
                    color: #6b6b6b;
                }
            }
        }
    }
    .textThree{
        margin-top: 0.7rem;
        display: flex;
        justify-content: space-around;
        .left{
            width: 3.10rem;
            .lineOne{
                margin-bottom: 0.17rem;
                span{
                    font-size: 0.28rem;
                    color: #e30202;
                }
                span:last-child{
                    font-size: 0.34rem;
                }
            }
            .lineTwo{
                margin-top: 0.25rem;
                margin-bottom: 0.25rem;
                span{
                    font-size: 0.24rem;
                    color: #6b6b6b;
                }
                select{
                    font-size: 0.2rem;
                    color: #5c5c5c;
                }
            }
            .lineThree{
                margin-bottom: 0.26rem;
                display: flex;
                justify-content: flex-start;
                .lineThreeLeft{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    p{
                        font-size: 0.24rem;
                        color: #5c5c5c;
                    }
                    span{
                        font-size: 0.18rem;
                        color: #5c5c5c;
                    }
                }
                .lineThreeRight{
                    display: flex;
                    justify-content: center;
                    .plus{
                        width: 0.48rem ;
                        height: 0.48rem;
                        border: 0.01rem solid #6b6b6b;
                        background: #b5b5b5;
                        text-align: center;
                        p{
                            margin-top: 0.04rem;
                            font-size: 0.33rem;
                            line-height: 0.33rem;
                            color: #2e2e2e;
                        }
                    }
                    .One{
                        width: 0.48rem ;
                        height: 0.48rem;
                        border: 0.01rem solid #6b6b6b;
                        text-align: center;
                        p{
                            margin-top: 0.1rem;
                            font-size: 0.33rem;
                            line-height: 0.33rem;
                            color: #2e2e2e;
                        }
                    }
                    .minus{
                        width: 0.48rem ;
                        height: 0.48rem;
                        border: 0.01rem solid #6b6b6b;
                        text-align: center;
                        background: #b5b5b5;
                        overflow: hidden;
                        p{
                            margin-top: 0.04rem;
                            font-size: 0.33rem;
                            line-height: 0.33rem;
                            color: #2e2e2e;
                        }
                    }
                }
            }
            .lineFour{
                p{
                    font-size: 0.2rem;
                    color: #6b6b6b;
                }
            }
        }
        .right{
            .lineOne{
                margin-bottom: 0.17rem;
                span{
                    font-size: 0.2rem;
                    color: #6b6b6b;
                }
                span:nth-child(2n){
                    font-size: 0.2rem;
                    color: #228ac5;
                }
            }
            .lineTwo{
                margin-bottom: 0.06rem;
                width: 1.45rem ;
                height: 0.6rem;
                border: 0.01rem solid #fee7e7;
                border-radius: 0.05rem;
                display: flex;
                justify-content: space-around;
                align-items: center;
                p{
                    font-size: 0.2rem;
                    color: white;
                }
            }
            .lineTwo:nth-child(2){
                background: #38e859;
            }
            .lineTwo:nth-child(3){
                background: #f6ac2b;
            }
            .lineTwo:nth-child(4){
                background: #f85c5c;
            }
        }
    }
    .grayline{
        width: 100%;
        height: 0.03rem;
        background: #e5e5e5;
        margin: 0.07rem 0 0.15rem 0;
    }
}

/*尾部*/
footer{
    .title{
        display: flex;
        justify-content: space-around;
        .attribute{
            width: 2.13rem;
            height: 0.72rem;
            background: #e7e7e7;
            border: 0.01rem solid #d0cfd3;
            display: flex;
            justify-content: space-around;
            align-items: center;
            p{
                font-size: 0.26rem;
                color: #515151;
                span{
                    font-size: 0.18rem;
                }
            }
        }
        .attribute:hover{
            border-bottom: none;
            background: #fff;
            p{
                color: red;
            }
        }
    }
    .text{
        ul{
            margin-top: 0.2rem;
            margin-left: 0.43rem;
            margin-bottom: 0.3rem;
            li{
                font-size: 0.26rem;
                line-height: 0.37rem;
            }
        }
    }
}
